<template>
<h1>综合练习</h1>
  <table border="1" align="center">
    <tr>
      <td>照片:</td>
      <td><img :src="person.imgUrl" width="100"></td>
    </tr>
    <tr>
      <td>姓名:</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友:</td>
      <td>
        <ul>
          <li v-for="fName in person.friends">{{fName}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <input type="button" value="加载数据" @click="load()">
</template>

<script setup>
import {ref} from "vue";

const person = ref({});
const load = ()=>{
  person.value = {name:"雷神",age:18,imgUrl:"img.png",friends:["钟离","布耶尔","巴巴托斯"]};
}
</script>

<style scoped>

</style>